<template>
    <van-skeleton title :row="3" v-if="status" />
    <div v-else>
        <div style="height: 45px;"></div>
        <van-nav-bar title="xx首页商城" fixed />

        <van-tabs v-model:active="active" animated>
            <van-tab title="首页商城"></van-tab>
            <van-tab title="名牌衣服"></van-tab>
            <van-tab title="手机品牌"></van-tab>
            <van-tab title="名牌鞋子"></van-tab>
        </van-tabs>

        <search></search>
        <swiper></swiper>

        <van-grid :column-num="4">
  <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
</van-grid>
        <van-grid :column-num="4">
  <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
</van-grid>
<div style="width: 100%; height: 30px; color: red;background-color: bisque;margin-top: 20px;">商城首页 商城首页 商城首页 商城首页 商城首页 商城首页</div>
<div style="width: 100%;height: 200px;">

<div style="width: 100%;height: 80px; margin: 50px;">
   <h4 style="background-color: pink; width: 60px;">倒计时</h4>
    <h4 style="float: left; margin-left: 20px; background-color: bisque; ">10:</h4>
    <h4 style="float: left; margin-left: 20px; background-color: bisque;">01:</h4>
    <h4 style="float: left; margin-left: 20px; background-color: bisque;">52</h4>
</div>

  <div style="width: 100%; height: 30px;">
    
      <h4 style="float: left;">直播间</h4> <h4 style="float: right;">更多《《</h4>
      
  </div>
    <div style="width: 70px; height: 70px; border: 1px solid black; margin-top: 50px; float: left; margin-left: 5px;"><img src="../2_03.jpg" alt="" style="width: 70px;height: 70px;"></div>
    <div style="width: 70px; height: 70px; border: 1px solid black; margin-top: 50px; float: left; margin-left: 5px;"><img src="../2_03.jpg" alt="" style="width: 70px;height: 70px;"></div>
    <div style="width: 70px; height: 70px; border: 1px solid black; margin-top: 50px; float: left; margin-left: 5px;"><img src="../2_03.jpg" alt="" style="width: 70px;height: 70px;"></div>
    <div style="width: 70px; height: 70px; border: 1px solid black; margin-top: 50px; float: left; margin-left: 5px;"><img src="../2_03.jpg" alt="" style="width: 70px;height: 70px;"></div>
</div>

<div style="width: 100%;height: 150px; margin-top: 20px;">
    
<div class="zuo" style="width: 200px;height: 200px;float: left; background-color: blanchedalmond;margin-top: 20px;" ><img src="../1_03.jpg" alt="" style="width: 200px;height: 200px;"></div>
<div class="yuo" style="width: 200px;height: 200px;float: right; background-color: bisque; margin-top: 20px;"><img src="../1_03.jpg" alt="" style="width: 200px;height: 200px;"></div>
</div>
<div style="width: 100%;height: 30px;">
    <h4 style="float: left; border: 1px solid red ;background-color: red;margin-left: 30px;">推荐</h4>
    <h4 style="float: left; border: 1px solid red ;background-color: red;margin-left: 30px;">百货</h4>
    <h4 style="float: left; border: 1px solid red ;background-color: red;margin-left: 30px;">日用</h4>
    <h4 style="float: left; border: 1px solid red ;background-color: red;margin-left: 30px;">食品</h4>
    <h4 style="float: left; border: 1px solid red ;background-color: red;margin-left: 30px;">商标</h4>
</div>
<div class="pbl" style="width: 100%;">
<div style="width: 150px;height: 200px;background-color: pink; line-height: 20px; "><img src="../../views/4_10.jpg" alt="" style="width: 150px;height: 150px;">￥1250</div>
<div style="width: 150px;height: 250px;background-color: pink ; line-height: 20px;"><img src="../../views/5_03.jpg" alt="" style="width: 150px;height: 150px;">￥1250</div>
<div style="width: 150px;height: 300px; background-color: pink; line-height: 20px;"><img src="../../views/6_03.jpg" alt="" style="width: 150px;height: 150px;">￥1250</div>
<div style="width: 150px;height: 200px; background-color: pink; line-height: 20px;"><img src="../../views/7_03.jpg" alt="" style="width: 150px;height: 150px;">￥1250</div>
<div style="width: 150px;height: 300px; background-color: pink;line-height: 20px; "><img src="../../views/4_10.jpg" alt="" style="width: 150px;height: 150px;">￥1250</div>
<div style="width: 150px;height: 200px; background-color: pink; line-height: 20px;"><img src="../../views/6_03.jpg" alt="" style="width: 150px;height: 150px;">￥1250</div>


</div>
    </div>
</template>

<script setup>

import { ref } from 'vue'
import search from '@/components/search.vue'
import swiper from '@/components/swiper.vue'

import { catitemsApi } from '@/api/api'

let status = ref(true)
setTimeout(() => {
    status.value = false
}, 500);


 let catitemsApiData=ref([])
  catitemsApi().then(res=>{
console.log('宫格',res);
catitemsApiData.value=res.data.message
 })
</script>

<style>
.pbl{
    div{
        column-count: 2;
        column-gap: 20px;
        display: inline-block;
   margin: 10px;
   margin-left: 30px;
    }
}
</style>
